<template>
  <el-dialog
    title="详情"
    :visible.sync="visible"
    width="1000px"
    top="20vh"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <div>
      <span
        >用户名/性别：{{ userDetail.nickname }}/{{
          userDetail.sex === 0 ? "未选择" : userDetail.sex === 1 ? "男" : "女"
        }}</span
      ><span>签名：{{ userDetail.signature }}</span
      ><span>手机号:{{ userDetail.mobile }}</span>
    </div>
    <div>
      <span>推荐人：{{ userDetail.inviter }}</span>
      <span>区域：{{ userDetail.district }}</span>
      <span v-if="userDetail.created_at"
        >注册时间：{{ userDetail.created_at.date.split(".")[0] }}</span
      >
    </div>
    <div>
      <span>动态：{{ userDetail.dynamic }}</span>
      <span>粉丝/关注：{{ userDetail.fans }}/{{ userDetail.concerns }}</span>
      <span>消费：{{ userDetail.expense }}</span>
    </div>
  </el-dialog>
</template>

<script>
import { getUserDetail } from "@/api/user-mng";
export default {
  name: "",
  props: ["visible", "id"],
  data() {
    return {
      userDetail: {}
    };
  },

  computed: {},

  watch: {
    visible: function(val) {
      if (val) {
        getUserDetail({ id: this.id }).then(res => {
          if (res.code === 200) {
            this.userDetail = res.data;
          }
        });
      } else {
        this.userDetail = {};
      }
    }
  },

  methods: {},

  created() {},

  components: {}
};
</script>
<style lang="scss" scoped>
div {
  span {
    display: inline-block;
    width: 300px;
    line-height: 60px;
  }
}
</style>
